『HTML5 canvas』HTML5练习之space bowling
来源：互联网 发布：单片机开发板图片 编辑：程序博客网 时间：2024/06/08 00:49
最近学习了一下html5的canvas技术，做了space bowling的小游戏练手。为cocos2d-html5做点准备。
only备份代码。
index.htm
<!DOCTYPE html><html><head><title>Space Bowing</title><meta charset="utf-8"><link href = "game.css" rel = "stylesheet" type = "text/css"><script type = "text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type = "text/javascript" src="game.js"></script></head><body> <div id = "game"> <div id = "gameUI"> <div id = "gameIntro"> <h1>Space bowing</h1> <p>This is an awesome game.</p> <p><a id="gamePlay" class="button" href="">Play</a></p> </div> <div id = "gameStats"> <p>Asteroids :<span id = "gameRemaining"></span></p> <p>Clicks :<span class = "gameScore"></span></p> <p><a class = "gameReset" href = "">Reset</a></p> </div> <div id = "gameComplete"> <h1>You Win!</h1> <p>Congratulations, you completed the game in <span class = "gameScore"></span> clicks.</p> <p><a class = "gameReset button" href = "">Play again</a></p> </div> </div> <canvas id = "gameCanvas" widrh = "350" height = "600"> <!--> </canvas> </div></body></html>
game.css
/* CSS Document */* {margin: 100; padding: 0;}html, body {height: 100%; width: 100%;}canvas {display: block;}body { background: #000; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 18px;}h1 { font-size: 30px;}p { margin: 0 20px;}a { color: #fff; text-decoration: none;}a:hover { text-decoration: underline;}a.button { background: #185da8; border-radius: 5px; display: block; font-size: 30px; margin: 40px 0 0 45px; padding: 10px; width: 200px;}a.button: hover { background: #2488f5; color: #fff text-decoration: none;}#game { heigth: 600px; left: 50%; margin: -350px 0 0 -175px; position: relative; top: 50%; width: 350px;}#gameCanvas { background: #001022;}#gameUI { height: 600px; position: absolute; width: 350px;}#gameIntro, #gameComplete { background: rgba(0, 0, 0, 0.5); margin-top: 100px; padding: 40px 0; text-align: center;}#gameStats { font-size: 14px; margin: 20px 0;}#gameStats .gameReset { margin: 20px 60px 0 0; position: absolute; right: 0; top: 0;}game.js
// JavaScript Document$(document).ready(function() { var canvas = $("#gameCanvas"); var context = canvas.get(0).getContext("2d"); var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); var playGame; var score; var asteroids; var player; var playerOriginalX; var playerOriginalY; var playerSelected; var playerMaxAbsVelocity; var playerVelocityDampener; var powerX; var powerY; var platformX; var platformY; var platformOuterRadius; var platformInnerRadius; var ui = $("#gameUI"); var uiIntro = $("#gameIntro"); var uiStats = $("#gameStats"); var uiComplete = $("#gameComplete"); var uiPlay = $("#gamePlay"); var uiReset = $(".gameReset"); var uiRemaining = $("#gameRemaining"); var uiScore = $(".gameScore"); var Asteroid = function(x, y, radius, mass, friction) { this.x = x; this.y = y; this.radius = radius; this.mass = mass; this.friction = friction; this.vX = 0; this.vY = 0; this.player = false; } function resetPlayer() { player.x = playerOriginalX; player.y = playerOriginalY; player.vX = 0; player.vY = 0; } function startGame() { uiScore.html("0"); uiStats.show(); platGame = false; platformX = canvasWidth/2; platformY = 150; platformOuterRadius = 100; platformInnerRadius = 75; asteroids = new Array(); playerSelected = false; playerMaxAbsVelocity = 30; playerVelocityDampener = 0.3; powerX = -1; powerY = -1; score = 0; var pRadius = 15; var pMass = 10; var pFriction = 0.97; playerOriginalX = canvasWidth/2; playerOriginalY = canvasHeight-150; player = new Asteroid(playerOriginalX, playerOriginalY, pRadius, pMass, pFriction); player.player = true; asteroids.push(player); var outerRing = 8; var ringCount = 3; var ringSpacing = (platformInnerRadius/(ringCount-1)); for(var r=0; r<ringCount; r++) { var currentRing = 0; var angle = 0; var ringRadius = 0; if(r == ringCount-1) { currentRing = 1; } else { currentRing = outerRing - (r*3); angle = 360/currentRing; ringRadius = platformInnerRadius-(ringSpacing*r); }; for(var a=0; a<currentRing; a++) { var x = 0; var y = 0; if(r == ringCount-1) { x = platformX; y = platformY; } else { x = platformX + (ringRadius*Math.cos((angle*a)*(Math.PI/180))); y = platformY + (ringRadius*Math.sin((angle*a)*(Math.PI/180))); var radius = 10; var mass = 5; var friction = 0.95; asteroids.push(new Asteroid(x, y, radius, mass, friction)); }; }; uiRemaining.html(asteroids.length-1); }; $(window).mousedown(function(e) { if(!playerSelected && player.x == playerOriginalX && player.y == playerOriginalY) { var canvasOffset = canvas.offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); if(!playGame) { playGame = true; animate(); }; var dX = player.x - canvasX; var dY = player.y - canvasY; var distance = Math.sqrt((dX*dX)+(dY*dY)); var padding = 5; if(distance < player.radius+padding) { powerX = player.x; powerY = player.y; playerSelected = true; }; }; }); $(window).mousemove(function(e) { if(playerSelected) { var canvasOffset = canvas.offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var dX = canvasX - player.x; var dY = canvasY - player.y; var distance = Math.sqrt((dX*dX)+(dY*dY)); if(distance*playerVelocityDampener < playerMaxAbsVelocity) { powerX = canvasX; powerY = canvasY; } else { var ratio = playerMaxAbsVelocity/(distance*playerVelocityDampener); powerX = player.x + (dX*ratio); powerY = player.y + (dY*ratio); }; }; }); $(window).mouseup(function(e) { if(playerSelected) { var dX = powerX - player.x; var dY = powerY - player.y; player.vX = -(dX * playerVelocityDampener); player.vY = -(dY * playerVelocityDampener); uiScore.html(++score); }; playerSelected = false; powerX = -1; powerY = -1; }); animate(); }; function init() { uiStats.hide(); uiComplete.hide(); uiPlay.click(function(e) { e.preventDefault(); uiIntro.hide(); startGame(); }); uiReset.click(function(e) { e.preventDefault(); uiComplete.hide(); startGame(); }); }; function animate() { context.clearRect(0, 0, canvasWidth, canvasHeight); context.fillStyle = "rgb(100, 100, 100)"; context.beginPath(); context.arc(platformX, platformY, platformOuterRadius, 0, Math.PI*2, true); context.closePath(); context.fill(); if(playerSelected) { context.strokeStyle = "rgb(255, 255, 255)"; context.lineWidth = 3; context.beginPath(); context.moveTo(player.x, player.y); context.lineTo(powerX, powerY); context.closePath(); context.stroke(); } context.fillStyle = "rgb(255, 255, 255)"; var deadAsteroids = new Array(); var asteroidsLength = asteroids.length; for(var i=0; i<asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; for(var j=i+1; j<asteroidsLength; j++) { var tmpAsteroidB = asteroids[j]; var dX = tmpAsteroidB.x - tmpAsteroid.x; var dY = tmpAsteroidB.y - tmpAsteroid.y; var distance = Math.sqrt((dX*dX)+(dY*dY)); if(distance < tmpAsteroidB.radius + tmpAsteroid.radius) { var angle = Math.atan2(dY, dX); var sine = Math.sin(angle); var cosine = Math.cos(angle); var x = 0; var y = 0; var xB = dX*cosine + dY*sine; var yB = dY*cosine - dX*sine; var vX = tmpAsteroid.vX * cosine + tmpAsteroid.vY * sine; var vY = tmpAsteroid.vY * cosine - tmpAsteroid.vX * sine; var vXb = tmpAsteroidB.vX * cosine + tmpAsteroidB.vY * sine; var vYb = tmpAsteroidB.vY * cosine - tmpAsteroidB.vX * sine; var vTotal = vX - vXb; vX = ((tmpAsteroid.mass - tmpAsteroidB.mass) * vX + 2 * tmpAsteroidB.mass * vXb) / (tmpAsteroid.mass + tmpAsteroidB.mass); vXb = vTotal + vX; xB = x + (tmpAsteroid.radius + tmpAsteroidB.radius); tmpAsteroid.x = tmpAsteroid.x + (y * cosine - y * sine); tmpAsteroid.y = tmpAsteroid.y + (y * cosine + x * sine); tmpAsteroidB.x = tmpAsteroid.x + (xB * cosine - yB * sine); tmpAsteroidB.y = tmpAsteroid.y + (yB * cosine + xB * sine); tmpAsteroid.vX = vX * cosine - vY * sine; tmpAsteroid.vY = vY * cosine + vX * sine; tmpAsteroidB.vX = vXb * cosine - vYb * sine; tmpAsteroidB.vY = vYb * cosine + vXb * sine; }; }; tmpAsteroid.x += tmpAsteroid.vX; tmpAsteroid.y += tmpAsteroid.vY; if (Math.abs(tmpAsteroid.vX) > 0.1) { tmpAsteroid.vX *= tmpAsteroid.friction; } else { tmpAsteroid.vX = 0; }; if (Math.abs(tmpAsteroid.vY) > 0.1) { tmpAsteroid.vY *= tmpAsteroid.friction; } else { tmpAsteroid.vY = 0; }; if (!tmpAsteroid.player) { var dXp = tmpAsteroid.x - platformX; var dYp = tmpAsteroid.y - platformY; var distanceP = Math.sqrt((dXp*dXp)+(dYp*dYp)); if (distanceP > platformOuterRadius) { // Kill asteroid if (tmpAsteroid.radius > 0 && tmpAsteroid != player) { tmpAsteroid.radius -= 1; } else { deadAsteroids.push(tmpAsteroid); }; }; }; if (player.x != playerOriginalX && player.y != playerOriginalY) { if (player.vX == 0 && player.vY == 0) { resetPlayer(); } else if (player.x+player.radius < 0) { resetPlayer(); } else if (player.x-player.radius > canvasWidth) { resetPlayer(); } else if (player.y+player.radius < 0) { resetPlayer(); } else if (player.y-player.radius > canvasHeight) { resetPlayer(); }; }; context.beginPath(); context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, true); context.closePath(); context.fill(); }; var deadAsteroidsLength = deadAsteroids.length; if (deadAsteroidsLength > 0) { for (var di = 0; di < deadAsteroidsLength; di++) { var tmpDeadAsteroid = deadAsteroids[di]; asteroids.splice(asteroids.indexOf(tmpDeadAsteroid), 1); }; var remaining = asteroids.length-1; // Remove player from asteroid count uiRemaining.html(remaining); if (remaining == 0) { // Winner! playGame = false; uiStats.hide(); uiComplete.show(); // Reset event handlers $(window).unbind("mousedown"); $(window).unbind("mouseup"); $(window).unbind("mousemove"); }; }; if(playGame) { setTimeout(animate, 33); }; }; init();});这里有别人发布的这个demo的展示，还提供了源码。
- 『HTML5 canvas』HTML5练习之space bowling
- HTML5 Canvas基础练习
- 【html5每日练习】html5 canvas画线
- 【html5每日练习】 html5 canvas "米"
- 【Html5每日练习】canvas笑脸
- HTML5 Canvas 练习(简单时钟)
- HTML5-Canvas绘图练习1
- Html5 之 Canvas
- HTML5研究之canvas
- Html5系列之Canvas
- html5之canvas
- html5之canvas动画
- html5--canvas之arcTo()
- html5 之canvas标签
- HTML5之Canvas
- html5之canvas起步
- html5之canvas进阶
- html5之canvas进阶
- RSS订阅
- PHP常用函数大全
- 用ctags为linux系统头文件生成systags
- Linux进程间通信：IPC对象——信号灯集详解
- 黑马程序员--增强for循环与 枚举
- 『HTML5 canvas』HTML5练习之space bowling
- 设计模式记忆口诀
- GCJ Round 1A 2008 Problem C. Numbers
- Android应用框架之Activity
- sys_connect_by_path 用法
- Unsupported major.minor version 51.0解决
- java基础：Scanner与BufferedReader读文件有什么区别呢？
- getline函数-linux
- vi配置文件
