zoukankan      html  css  js  c++  java
  • HTML5游戏开发系列教程1(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-1/

          以后的每篇文章都会加入一些新的东西。在这篇里我们创建了一个有7个顶点的图形,并在这些顶点上画圆圈,这样我们能通过拖动圆圈来改变顶点的位置。

    我们用半透明的颜色来填充该图形。对于刚开始来说,这样就足够了。

    第一步:HTML

    index.html

    <!DOCTYPE html>
    <html lang="en">
    		<head>
    				<meta charset="utf-8" />
    				<title>HTML5 Game step 1 (demo) | Script Tutolials</title>
    				<link href="css/main.css" rel="stylesheet" type="text/css" />
    				<!--[if lt IE 9]>
    					<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    				<![endif]-->
    				<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
    				<script type="text/javascript" src="js/script.js"></script>
    		</head>
    		<body>
    				<div class="container">
    						<canvas id="scene" width="800" height="600"></canvas>
    				</div>
    				<footer>
    						<h2>HTML5 Game step 1</h2>
    						<a href="http://www.script-tutorials.com/htm5-game-development-lesson-1"
    								class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
    				</footer>
    		</body>
    </html>
    

      

    第二步:CSS

    css/main.css

    /* general styles */
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color:#bababa;
    	background-image:-webkit-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
    	background-image: -moz-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
    	background-image: -o-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
    	background-image: radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
    	color:#fff;
    	font:14px/1.3 Arial,sans-serif;
    	min-height:1000px;
    }
    
    .container {
        100%;
    }
     
    .container > * {
        display:block;
        margin:50px auto;
    }
     
    footer {
        background-color:#212121;
        bottom:0;
        box-shadow: 0 -1px 2px #111111;
        display:block;
        height:70px;
        left:0;
        position:fixed;
        100%;
        z-index:100;
    }
     
    footer h2{
        font-size:22px;
        font-weight:normal;
        left:50%;
        margin-left:-400px;
        padding:22px 0;
        position:absolute;
        540px;
    }
     
    footer a.stuts,a.stuts:visited{
        border:none;
        text-decoration:none;
        color:#fcfcfc;
        font-size:14px;
        left:50%;
        line-height:31px;
        margin:23px 0 0 110px;
        position:absolute;
        top:0;
    }
     
    footer .stuts span {
        font-size:22px;
        font-weight:bold;
        margin-left:5px;
    }
     
    h3 {
        text-align:center;
    }
     
    /* tutorial styles */
    #scene {
        background-image:url(../images/01.jpg);
        position:relative;
    }
    

      

    第三步:JS

    js/jquery-1.5.2.min.js

    在这个示例中我们使用jQuery,jQuery可以很方便的绑定不同的事件(比如鼠标事件).script.js是最重要的文件,因为它处理了所有的逻辑。

    (原文中用了jquery-1.5.2.min.js,而我自己的例子用了jquery-2.0.0.min.js,所以代码中有些小区别)

    js/script.js

    var canvas, ctx;
    var circles = [];
    var selectedCircle;
    var hoveredCircle = -1;
    
    /**
    * @brief	创建圆圈对象
    *
    * @param	x   横坐标
    * @param	y   纵坐标
    * @param	radius  半径
    *
    * @return	
    */
    function Circle(x, y, radius) {
    	this.x = x;
    	this.y = y;
    	this.radius = radius;
    }
    
    /**
    * @brief	清空canvas
    *
    		* @return	
    */
    function clear() {
    	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    
    /**
    * @brief	画圆圈
    *
    * @param	ctx
    * @param	x
    * @param	y
    * @param	radius
    *
    * @return	
    */
    function drawCircle(ctx, x, y, radius) {
    	ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    	ctx.beginPath();
    	ctx.arc(x, y, radius, 0, Math.PI * 2, true);
    	ctx.closePath();
    	ctx.fill();
    }
    
    /**
    * @brief    画整个canvas
    *
    * @return	
    */
    function drawScene() {
    	clear(); //清除canvas
    
    	ctx.beginPath();   //定制图形开始
    	ctx.fillStyle = 'rgba(255, 110, 110, 0.5)';
    	ctx.moveTo(circles[0].x, circles[0].y);
    	for (var i = 0; i < circles.length; i++) {
    		ctx.lineTo(circles[i].x, circles[i].y);
    	}
    	ctx.closePath();   //定制图形结束
    	ctx.fill();   //填充定制的图形 
    
    	ctx.lineWidth = 5;
    	ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
    	ctx.stroke();  //画边
    	
    	for (var i = 0; i < circles.length; i++) { //画所有的圆圈
    		drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15);
    	}
    }
    
    //初始化
    $(function() {
    	canvas = document.getElementById('scene');
    	ctx = canvas.getContext('2d');
    
    	var circleRadius = 15;
    	var width = canvas.width;
    	var height = canvas.height;
    
    	var circlesCount = 7;   //将会随机的画7个圆圈
    	for (var i = 0; i < circlesCount; i++) {
    		var x = Math.random() * width;
    		var y = Math.random() * height;
    		circles.push(new Circle(x, y, circleRadius));
    	}
    
    	// 绑定鼠标按下事件(拖动)
    	$('#scene').mousedown(function(e) {
    		var canvasPosition = $(this).offset();
    		var mouseX = e.originalEvent.layerX || 0;  //这里原文使用的是e.layerX, 具体原因详见:http://blog.jquery.com/2011/11/03/jquery-1-7-released/
    		var mouseY = e.originalEvent.layerY || 0;
    		for (var i = 0; i < circles.length; i++) { //判断鼠标按下点坐标在那个圆圈里面
    			var circleX = circles[i].x;
    			var circleY = circles[i].y;
    			var radius = circles[i].radius;
    			if (Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2) < Math.pow(radius, 2)) {
    				selectedCircle = i;
    				break;
    			}
    		}
    	});
    
    	//绑定鼠标移动事件,使可以拖动被选中的圆圈
    	$('#scene').mousemove(function(e) {
    		var mouseX = e.originalEvent.layerX || 0;
    		var mouseY = e.originalEvent.layerY || 0;
    		if (selectedCircle != undefined) {
    			var canvasPosition = $(this).offset();
    			var radius = circles[selectedCircle].radius;
    			circles[selectedCircle] = new Circle(mouseX, mouseY, radius);  //改变被选中圆圈的位置
    		}
    
    		hoveredCircle = undefined;
    		for (var i = 0; i < circles.length; i++) {  //检查所有的圆圈,判断鼠标按下点是否在圆圈内
    			var circleX = circles[i].x;
    			var circleY = circles[i].y;
    			var radius = circles[i].radius;
    			if (Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2) < Math.pow(radius, 2)) {
    				hoveredCircle = i;
    				break;
    			}
    		}
    	});
    
    	//鼠标释放事件,用来清除标记selectedCircle
    	$('#scene').mouseup(function() {
    		selectedCircle = undefined;
    	});
    
    	//循环画
    	setInterval(drawScene, 30);
    });
    

      

    下载链接:http://www.script-tutorials.com/demos/147/source.zip

  • 相关阅读:
    AS将一个项目导入到另一个项目中
    Android Studio出现:Cause: unable to find valid certification path to requested target
    小米手机Toast带app名称
    PopupWindow 点击外部区域无法关闭的问题
    EditText inputType类型整理
    Fragment通过接口回调向父Activity传值
    Android selector一些坑
    Installation failed with message Failed to commit install session 634765663 with command cmd package
    旷视上海研究院机器人方向招聘
    语义SLAM的数据关联和语义定位(四)多目标测量概率模型
  • 原文地址:https://www.cnblogs.com/pigzhu/p/3100018.html
Copyright © 2011-2022 走看看