javascript 初学教程及五子棋小程序的简单实现
一.JavaScript简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
二.hbulider工具的使用
1）
hbulider的特点：
1.飞快的编码速度
2.HBuilder直接创建移动App，打包为ios或Android原生安装包
3.HTML5语法、HTML5+语法、三大浏览器扩展语法，尽收HBuilder中
4.绿柔设置界面，更加护眼
2）
下载hbulider安装包
百度搜索hbulider，进入官方网站，点击右上角 download 按钮，即可下载。
4）
下载完成后可以看到下载到的是一个压缩包，打开下载的压缩包，将压缩包内的文件解压到希望存放的位置，点击确定。
5）
解压完成后，找到解压位置，点击hbulider.exe文件，开始安装。
6）打开后选择一个一般用来存放代码的文件夹作为代码目录。
7）根据自己的实际情况，选择所能看清楚的颜色块，然后点击下方 生成适合你的视觉方案 生成一个舒适的配色。
8）选择喜欢的视觉主题，点击下面的 确认并关闭 ，完成设置。
9）完成后进入到欢迎向导，如图，到此安装完成。
三.用hbulider写一个五子棋小程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五子棋游戏</title>
</head>
<body>
<canvas id="myCanvas" width="570" height="570"
style="border: 2px solid #abcabc"></canvas>
<!--
作者：offline
时间：2017-07-03
描述：使用js代码控制游戏逻辑
-->
<script type="text/javascript">
//获取canvas的标签
var ChessCanvas = document.getElementById("myCanvas");
//获取画布
var gameCanvas = ChessCanvas.getContext("2d");
//定义棋盘大小
var map = 25;
//棋子大小
var chessSize = 24;
//获取下棋的坐标
var x = y = 0;
//棋子的颜色
var isRed = true;//==true的该下红棋 否则下黑棋
var color = "#000000";
//棋子数组 二维数组
//保存所下的棋子 0：未下；1：下红棋；2：下黑棋
var chessData = new Array(23);
for(var i=0;i<23;i++)
{
chessData[i] =new Array(23);
for(var j=0;j<23;j++)
{
chessData[i][j] = 0;
}
}
//所下棋子在棋子数组的位置
var i,j;
//绘制棋盘
for(var i=0;i<23;i++)
{
gameCanvas.moveTo(10,10+i*map);
gameCanvas.lineTo(560,10+i*map);
gameCanvas.moveTo(10+i*map,10);
gameCanvas.lineTo(10+i*map,560);
gameCanvas.stroke();//画
}
//创建函数，完成下棋
function addChess(x,y)
{
//下棋 画小圆圈 角度转弧度 π/180×角度 弧度变角度 180/π×弧度
gameCanvas.beginPath();//开始
gameCanvas.arc(x,y,12,0,Math.PI*2,true);//画棋子
gameCanvas.fillStyle = color;
gameCanvas.fill();
gameCanvas.closePath();//结束
if(color=="#000000")
{
color = "#ff0000";
//黑棋
chessData[i][j] = 2;
}else{
color = "#000000";
//红棋
chessData[i][j] = 1;
}
}
//重复调用 在做坦克大战之类游戏 需要使用。。。。。。。
// window.setInterval(函数,时间);
//游戏是否结束
// function isGameWin()
//如果是人机对战版，则需要下棋的AI 如果不是人机对战 则下完棋后，提醒对方下棋
// function gameAI()
//做鼠标监听 游戏逻辑
document.onmousedown= function(e)
{
window.onclick = function (){
//获取下棋的坐标
i = Math.round((e.x-10)/25);
j = Math.round((e.y-10)/25);//边界不能下
//判断该位置x，y是否可以下棋
x = i*25+10;
y = j*25+10;
//判断该位置ij是否有棋子
if(chessData[i][j]==0)
{
//下棋
addChess(x,y);
}else{
alert("不好意思！你来晚了，已经被对方捷足先登了");
}
}
}
</script>
</body>
</html>
代码不全，会陆续加上。
以上这篇javascript 初学教程及五子棋小程序的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *
-
JS+canvas实现的五子棋游戏【人机大战版】
本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css
-
原生JS+Canvas实现五子棋游戏
本文实例为大家分享了JS Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px auto; box-shadow: -2p
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
javascript 初学教程及五子棋小程序的简单实现
一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+
-
python实现五子棋小程序
本文实例为大家分享了python实现五子棋小程序的具体代码,供大家参考,具体内容如下 一.结合书上例子,分三段编写: wuziqi.py #coding:utf-8 from win_notwin import * from show_qipan import * maxx=10 #10行10列 maxy=10 qipan=[[0,0,0,0,1,0,0,2,0,0],[0,1,2,1,1,0,2,0,0,0],[0,0,0,0,1,1,0,2,0,0],[0,0,0,0,2,0,0,1,0,0
-
微信小程序实现简单input正则表达式验证功能示例
本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
-
详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,
-
微信小程序实现简单表格
本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下 效果图: wxml <view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view class="th "
-
微信小程序实现简单手写签名组件的方法实例
目录 背景: 需求: 效果 一.思路 二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时 三.总结 背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果 一.思路 在微信小程序中,我们使用canvas组件实现.将用户的输入
-
微信小程序实现简单计算器功能
微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器. 运行截图 计算器对于界面美观的要求并不高,只是一些view以及button控件的组合,所以并不需要在界面上费很多功夫.重要的是逻辑层,之所以选择计算器作为上手的第一个项目,因为计算器的逻辑可简可繁,完全可以适应新手对小程序的掌握程度. 主要代码 js: Page({ data: { result:"0",
-
小程序实现简单的计算器
本文实例为大家分享了小程序实现简单计算器的具体代码,供大家参考,具体内容如下 #app.json { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle":
-
小程序实现简单列表功能
本文实例为大家分享了小程序实现简单列表功能的具体代码,供大家参考,具体内容如下 列表组件 for只要给组件增加for一个数组那么就可以实现列表组件 wxml代码 <block wx:for="{{yetinglist}}"> <view class='waibian' bindtap="readDetail" data-id="{{item.title}}"> <image src="{{item.smal
-
微信小程序实现简单聊天室
本文实例为大家分享了微信小程序实现简单聊天室的具体代码,供大家参考,具体内容如下 cha.js // pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({ /** * 页面的初始数据 */ data: { nickname:'', avatar:'', chatlists:[ { nickname:'小林', avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b