console 命令行工具 X clear
console
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>img</title>
<style type="text/css">
        #canvas{
            border: 1px solid #ADACB0;
            display: block;
            margin: 20px auto;
        }
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300">
        你的浏览器还不支持canvas
</canvas>
<span>Point:</span><span id ="point">0</span>


</body>
<script>
/**
 * @file
 * @author DongNege(569679198@qq.com)
 *
 *
 *
 */
var log = console.log.bind(console);
var canvas = document.getElementById("canvas")
var cxt = canvas.getContext("2d")

cxt.fillStyle = "blue";
cxt.fillRect(145, 145, 10, 10);

var x = 145,y = 145;
var leftDown = false;
var rightDown = false;
var upDown = false;
var downDown = false;
var speed = 5;
//var speedd = 8;
var randown;
var ranup;
var long = 10;
var point = 0;
//var m = 145,n = 145;

window.addEventListener('keydown', function (event) {
  var k = event.key
  if (k == 'a') {
    leftDown = true;
  } else if (k == 'd') {
    rightDown = true;
  } else if (k == 'w') {
		upDown = true;
	} else if (k == 's') {
		downDown = true;
	}
})


window.addEventListener('keyup', function (event) {
var k = event.key
if (k == 'a') {
    leftDown = false;
  } else if (k == 'd') {
    rightDown = false;
  } else if (k == 'w') {
		upDown = false;
	} else if (k == 's') {
		downDown = false;
	}
})

setInterval(function() {
 if (((x >= 0)
    && (x <= 290))
    && ((y >= 0)
    && (y <= 290))) {
	if (leftDown) {
    x -= speed;
} else if (rightDown) {
    x += speed;
} else if (upDown) {
		y -= speed;
} else if (downDown) {
		y += speed;
}} else {
		x = 145;
		y = 145;
}
				long = long + 5;
				cxt.clearRect(0, 0, 300, 300);
				cxt.fillStyle = "blue";
        cxt.fillRect(x, y, 10, 10);
				cxt.fillStyle = "red";
				cxt.fillRect(randown,0,10,long);
				cxt.fillRect(ranup,300-long,10,long);
				if ((((x>=randown)
        &&(x<=(randown+10))
        &&(y<=long)))
        ||(((x>=ranup)
        &&(x<=(ranup+10))
        &&(y>=300-long)))){
				die();
				}
      },1000/50)

setInterval("attack()",1000);

function attack() {
	ranup = Math.floor(Math.random()*290);
	randown = Math.floor(Math.random()*290);
	long = 10;
	point++;
	document.getElementById("point").innerHTML = point;
}

function die() {
  alert("WASTE");
  x = 145,y = 145;
 leftDown = false;
 rightDown = false;
 upDown = false;
 downDown = false;
 speed = 5;
 long = 10;
 point = 0;
}



/*if (((m >= 0) && (m <= 290)) && ((n >= 0) && (n <= 290))){
				var ran = Math.floor(Math.random()*4);
				switch (ran){
				case 0:
				  m += speedd;
				  break;
				case 1:
				  m -= speedd;
				  break;
				case 2:
				  n += speedd;
				  break;
				case 3:
				  n -= speedd;
				  break;
				}
			} else {
				m = 145;
				n = 145;
			}

			cxt.fillRect(m,n,10,10);  */
</script>
</html>