-
-
Save zhangjiannan/1310a5ed563aa3444dab to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<meta name="apple-mobile-web-app-capable" content="yes" /> | |
<style> | |
body { | |
margin:0; | |
} | |
canvas { | |
border:1px solid #d3d3d3; | |
background-color: #f1f1f1; | |
} | |
</style> | |
</head> | |
<body onload="startGame()"> | |
<div id="myconsole" style="display:none;width:100%;height:100%;position:absolute;top:0;left:0;text-align:center;padding-top:100px;"></div> | |
<script> | |
function playgame() { | |
if (!myGameArea.interval) { | |
myGameArea.interval = setInterval(updateGameArea, 20); | |
} else { | |
myGameArea.pause = false; | |
} | |
} | |
function pausegame() { | |
myGameArea.pause = true; | |
} | |
var myball; | |
var myGamePiece; | |
var myObstacles = []; | |
function startGame() { | |
var x = 0, y = 12; | |
myGameArea.start(); | |
myGamePiece = new component(100, 10, "red", myGameArea.canvas.width / 2 - 50, myGameArea.canvas.height - 20); | |
myball = new component(5, 5, "black", myGameArea.canvas.width / 2 - 2.5 - 100, 110); | |
for (i = 0; i < 68; i++) { | |
if ((x + 30) > myGameArea.canvas.width) { | |
x = 0; | |
y = y + 15; | |
} | |
if (x == 0) {x = 20; } | |
x = x + 5; | |
myObstacles.push(new component(30, 10, "green", x, y)); | |
x = x + 30; | |
} | |
myGameArea.setsize(); | |
myball.speedY -= 2; | |
myball.speedX -= 2; | |
} | |
var myGameArea = { | |
canvas : document.createElement("canvas"), | |
start : function() { | |
this.canvas.width = 640; | |
this.canvas.height = 250; | |
this.pause = false; | |
this.frameNo = 0; | |
this.canvas.style.cursor = "none"; //hide the original cursor | |
this.context = this.canvas.getContext("2d"); | |
myGameArea.interval = setInterval(updateGameArea, 20); | |
document.body.insertBefore(this.canvas, document.body.childNodes[0]); | |
window.addEventListener('mousemove', function (e) { | |
myGameArea.x = e.pageX; | |
}) | |
window.addEventListener('resize', function (e) { | |
myGameArea.setsize(); | |
}); | |
}, | |
clear : function() { | |
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | |
}, | |
stop : function() { | |
clearInterval(this.interval); | |
this.pause = true; | |
}, | |
setsize : function() { | |
this.ratio = this.canvas.height / this.canvas.width, | |
this.currentWidth = window.innerWidth; | |
this.currentHeight = this.currentWidth * this.ratio; | |
this.canvas.style.width = this.currentWidth - 20 + "px"; | |
this.canvas.style.height = this.currentHeight + "px"; | |
this.scale = this.currentWidth / this.canvas.width; | |
} | |
} | |
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.crashLeft = function(otherobj) { | |
var myleft = this.x; | |
var myright = this.x + (this.width); | |
var mytop = this.y; | |
var mybottom = this.y + (this.height); | |
var otherleft = otherobj.x; | |
var otherright = otherobj.x + (otherobj.width); | |
var othertop = otherobj.y; | |
var otherbottom = otherobj.y + (otherobj.height); | |
var crash = false; | |
if (myleft < otherleft && myright > otherleft && mytop < otherbottom && mybottom > othertop) { | |
crash = true; | |
} | |
return crash; | |
} | |
this.crashRight = function(otherobj) { | |
var myleft = this.x; | |
var myright = this.x + (this.width); | |
var mytop = this.y; | |
var mybottom = this.y + (this.height); | |
var otherleft = otherobj.x; | |
var otherright = otherobj.x + (otherobj.width); | |
var othertop = otherobj.y; | |
var otherbottom = otherobj.y + (otherobj.height); | |
var crash = false; | |
if (myright > otherright && myleft < otherright && mytop < otherbottom && mybottom > othertop) { | |
crash = true; | |
} | |
return crash; | |
} | |
this.crashWith = function(otherobj) { | |
var myleft = this.x; | |
var myright = this.x + (this.width); | |
var mytop = this.y; | |
var mybottom = this.y + (this.height); | |
var otherleft = otherobj.x; | |
var otherright = otherobj.x + (otherobj.width); | |
var othertop = otherobj.y; | |
var otherbottom = otherobj.y + (otherobj.height); | |
var crash = true; | |
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { | |
crash = false; | |
} | |
return crash; | |
} | |
this.hitLeftBoundary = function() { | |
var hit = false; | |
var leftPos = this.x; | |
if (leftPos <= 0) { | |
hit = true; | |
} | |
return hit; | |
} | |
this.hitRightBoundary = function() { | |
var hit = false; | |
var rightPos = this.x + this.width; | |
if (rightPos > myGameArea.canvas.width) { | |
hit = true; | |
} | |
return hit; | |
} | |
this.hitTopBoundary = function() { | |
var hit = false; | |
var topPos = this.y; | |
if (topPos <= 0) { | |
hit = true; | |
} | |
return hit; | |
} | |
this.hitBottomBoundary = function() { | |
var hit = false; | |
var bottomPos = this.y + (this.height); | |
if (bottomPos >= myGameArea.canvas.height) { | |
hit = true; | |
} | |
return hit; | |
} | |
this.hitAnyBoundary = function() { | |
if (this.hitLeftBoundary()) {return true;} | |
if (this.hitRightBoundary()) {return true;} | |
if (this.hitTopBoundary()) {return true;} | |
if (this.hitBottomBoundary()) {return true;} | |
return false; | |
} | |
} | |
var lastspeedX = 0; | |
var ss = 0; | |
function updateGameArea() { | |
var x, y, speed = 0; | |
for (i = 0; i < myObstacles.length; i += 1) { | |
if (myball.crashWith(myObstacles[i])) { | |
if (myball.crashLeft(myObstacles[i]) || myball.crashRight(myObstacles[i])) { | |
myball.speedX = -(myball.speedX); | |
} else { | |
myball.speedY = -(myball.speedY); | |
} | |
myObstacles.splice(i, 1); | |
} | |
} | |
if (myGameArea.tiltX) { | |
myGamePiece.speedX = myGameArea.tiltX + 1; | |
} | |
if (myGameArea.x) { | |
myGamePiece.x = myGameArea.x; | |
if (lastspeedX) {speed = (myGameArea.x - lastspeedX) / 2; } | |
lastspeedX = myGameArea.x; | |
} | |
if (myball.crashWith(myGamePiece)) { | |
myball.speedY = -(myball.speedY); | |
myball.speedX = myball.speedX + speed; | |
if (myball.speedX > 2) {myball.speedX = 2; } | |
} | |
if (myball.hitLeftBoundary()) { | |
myball.speedX = -(myball.speedX); | |
} | |
if (myball.hitRightBoundary()) { | |
myball.speedX = -(myball.speedX); | |
} | |
if (myball.hitTopBoundary()) { | |
myball.speedY = -(myball.speedY); | |
} | |
if (myball.hitBottomBoundary()) { | |
myGameArea.stop(); | |
} | |
if (myGamePiece.hitAnyBoundary()) { | |
if (myGamePiece.x < 0) {myGamePiece.x = 0;} | |
if (myGamePiece.x > myGameArea.canvas.width - myGamePiece.width) {myGamePiece.x = myGameArea.canvas.width - myGamePiece.width;} | |
} | |
if (myGameArea.pause == false) { | |
myGameArea.clear(); | |
myGameArea.frameNo += 1; | |
for (i = 0; i < myObstacles.length; i += 1) { | |
myObstacles[i].update(); | |
} | |
myball.x += myball.speedX; | |
myball.y += myball.speedY; | |
myball.update(); | |
myGamePiece.x += myGamePiece.speedX; | |
myGamePiece.y += myGamePiece.speedY; | |
myGamePiece.update(); | |
if (myGameArea.frameNo == 1) { | |
myGameArea.pause = true; | |
} | |
} | |
} | |
</script> | |
<button onclick="playgame()">Play Game</button> | |
<button onclick="pausegame()">Pause Game</button> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment