『HTML5 canvas』HTML5练习之space bowling

最新推荐文章于 2021-07-03 17:45:46 发布

SimpleDrunk

最新推荐文章于 2021-07-03 17:45:46 发布

阅读量1k

点赞数

分类专栏： html5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/simpledrunk/article/details/10910743

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近学习了一下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的展示，还提供了源码。