<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body { margin: 0;
}
canvas { border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myUpBtn;
var myDownBtn;
var myLeftBtn;
var myRightBtn;
function startGame() { myGamePiece = new component(30, 30, "red", 10, 120);
myUpBtn = new component(30, 30, "blue", 50, 10);
myDownBtn = new component(30, 30, "blue", 50, 70);
myLeftBtn = new component(30, 30, "blue", 20, 40);
myRightBtn = new component(30, 30, "blue", 80, 40);
myGameArea.start();
}
var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('mousedown', function (e) { myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('mouseup', function (e) { myGameArea.x = false;
myGameArea.y = false;
})
window.addEventListener('touchstart', function (e) { myGameArea.x = e.pageX;
myGameArea.y = e.pageY;
})
window.addEventListener('touchend', function (e) { myGameArea.x = false;
myGameArea.y = false;
})
},
clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) { this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() { ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.clicked = function() { var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var clicked = true;
if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) { clicked = false;
}
return clicked;
}
}
function updateGameArea() { myGameArea.clear();
if (myGameArea.x && myGameArea.y) { if (myUpBtn.clicked()) { myGamePiece.y -= 1;
}
if (myDownBtn.clicked()) { myGamePiece.y += 1;
}
if (myLeftBtn.clicked()) { myGamePiece.x += -1;
}
if (myRightBtn.clicked()) { myGamePiece.x += 1;
}
}
myUpBtn.update();
myDownBtn.update();
myLeftBtn.update();
myRightBtn.update();
myGamePiece.update();
}
</script>
<p>单击蓝色“按钮”可使红色方块移动。</p>
</body>
</html>