Jquery 2d character movement

Developer
Drew Adams
Size
4,291 Kb
Views
18,216
  1. Jquery 2d character movement Previews
  2. Jquery 2d character movement HTML Codes
  3. Jquery 2d character movement CSS Codes
  4. Jquery 2d character movement JS Codes

How do I make an jquery 2d character movement?

What is a jquery 2d character movement? How do you make a jquery 2d character movement? This script and codes were developed by Drew Adams on 04 October 2022, Tuesday.

Jquery 2d character movement Previews
IQ Test

Jquery 2d character movement - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jquery 2d character movement</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="pointer top"></div>	<div class="pointer right"></div>	<div class="pointer bottom"></div>	<div class="pointer left"></div>	<div class="arena">	<div id="player"></div>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery 2d character movement - Script Codes CSS Codes

.container { height: 700px; width: 700px; margin: 75px auto 0; position: relative;
}
.container .pointer { display: none; height: 0; width: 0; position: absolute;
}
.container .pointer.top { border-right: 10px solid transparent; border-top: 20px solid green; border-left: 10px solid transparent; bottom: 101%;
}
.container .pointer.top:before { content: attr(data-distance); position: relative; right: 8px; bottom: 55px;
}
.container .pointer.right { border-top: 10px solid transparent; border-right: 20px solid green; border-bottom: 10px solid transparent; left: 101%;
}
.container .pointer.right:before { content: attr(data-distance); position: relative; top: -7px; left: 45px;
}
.container .pointer.bottom { border-right: 10px solid transparent; border-bottom: 20px solid green; border-left: 10px solid transparent; top: 101%;
}
.container .pointer.bottom:before { content: attr(data-distance); position: relative; top: 40px; right: 8px;
}
.container .pointer.left { border-top: 10px solid transparent; border-left: 20px solid green; border-bottom: 10px solid transparent; right: 101%;
}
.container .pointer.left:before { content: attr(data-distance); position: relative; top: -7px; right: 55px;
}
.container .arena { border: 1px solid black; height: 100%; width: 100%; overflow: hidden; position: relative;
}
.container .arena #player { border-right: 25px solid transparent; border-bottom: 50px solid #990000; border-left: 25px solid transparent; height: 0; width: 0; position: absolute; top: 335px; left: 335px; z-index: 100;
}

Jquery 2d character movement - Script Codes JS Codes

// global variables
var maxSpeed = 5;
var playerAngle = 0;
var playerSpeed = 0;
var speedVariation = 0.25;
// objects
var $player = $('#player');
var $topPointer = $('.pointer.top');
var $rightPointer = $('.pointer.right');
var $bottomPointer = $('.pointer.bottom');
var $leftPointer = $('.pointer.left');
var keys = {};
var playerAttr = new character(	$player.css('border-bottom-width'),	$player.css('border-bottom-width'),	$player.css('top'),	$player.css('right'),	$player.css('bottom'),	$player.css('left')
);
// constant variables
var DIRECTION = { left: 'left', right: 'right' };
var KEYS = { left: 37, up: 38, right: 39, down: 40 };
var MAX_ANGLE = 180;
var MIN_ANGLE = -180;
$(document).ready(function() {	$player.data('angle', 0);	setInterval(movePlayer, 20);
});// end document ready
$(document).keydown(function(e) { keys[e.keyCode] = true;
});
$(document).keyup(function(e) { delete keys[e.keyCode];
});
// move the player character based on arrow key press
function movePlayer() {	determinePlayerOutOfBounds();	if(!(keys.hasOwnProperty(KEYS.up) || keys.hasOwnProperty(KEYS.down))) {	decceleratePlayer();	determineNewPlayerPosition();	}	for (var direction in keys) { // left if (direction == KEYS.left) {	rotate($player, DIRECTION.left);	} // up if (direction == KEYS.up) {	acceleratePlayer();	determineNewPlayerPosition(); } // right if (direction == KEYS.right) {	rotate($player, DIRECTION.right); } // down if (direction == KEYS.down) {	//acceleratePlayer();	//decceleratePlayer();	//determinePlayerPosition(); }	// check if player isn't only turning	if(!(keys.hasOwnProperty(KEYS.up))) {	decceleratePlayer();	} }// end for-loop
}// end movePlayer()
// determine where the player will move based on the direction it's facing
function determineNewPlayerPosition() {	var horizontal = Math.sin(convertToRadians(playerAngle)) * playerSpeed;	var vertical = Math.cos(convertToRadians(playerAngle)) * playerSpeed;	$player.animate({ top: "-=" + vertical, left: '+=' + horizontal }, 0);	updatePlayerAttributes();
}// end determinePlayerPosition()
// check if the player is outside the arena bounds
function determinePlayerOutOfBounds() {	var playerTop = parseInt(playerAttr.top);	var playerRight = parseInt(playerAttr.right);	var playerBottom = parseInt(playerAttr.bottom);	var playerLeft = parseInt(playerAttr.left);	var playerWidth = parseInt(playerAttr.width);	var pointerWidth = parseInt($topPointer.css('border-top-width'));	var maxBound = 690;	// check if the player is above the arena	if(playerTop <= 0)	pointerBounds('topBottom', $topPointer);	else	$topPointer.css({ 'display':'none' });	// check if the player is below the arena	if(playerBottom <= 0)	pointerBounds('topBottom', $bottomPointer);	else	$bottomPointer.css({ 'display':'none' });	// check if the player is left of the arena	if(playerLeft <= 0) {	pointerBounds('rightLeft', $leftPointer);	}	else {	$leftPointer.css({ 'display':'none' });	}	// check if player is right of the arena	if(playerRight <= 0) {	pointerBounds('rightLeft', $rightPointer);	}	else {	$rightPointer.css({ 'display':'none' });	}	//	function pointerBounds(direction, pointer) {	if(direction == 'topBottom') {	var newLeft = playerLeft + (playerWidth / 2) - (pointerWidth / 2);	var pointerTopBottom = pointer == $topPointer ? playerAttr.top : playerAttr.bottom;	if(newLeft < -10)	newLeft = -10;	else if(newLeft > maxBound)	newLeft = maxBound;	// show distance	pointer.attr('data-distance', Math.abs(parseInt(pointerTopBottom)));	pointer.css({ 'display':'block', 'left':newLeft });	}	else if(direction == 'rightLeft') {	var newTop = playerTop + (playerWidth / 2) - (pointerWidth / 2);	var pointerRightLeft = pointer == $rightPointer ? playerAttr.right : playerAttr.left;	if(newTop < -10)	newTop = -10;	else if(newTop > maxBound)	newTop = maxBound;	pointer.attr('data-distance', Math.abs(parseInt(pointerRightLeft)));	pointer.css({ 'display':'block', 'top':newTop });	}	}// end inner function pointerBounds(direction, pointer)
}// end determinePlayerOutOfBounds()
// update the player position attributes
function updatePlayerAttributes() {	playerAttr.top = $player.css('top');	playerAttr.right = $player.css('right');	playerAttr.bottom = $player.css('bottom');	playerAttr.left = $player.css('left');
}// end updateCharacterAttributes(character)
// increase playerSpeed
function acceleratePlayer() {	// make sure playerSpeed isn't over maxSpeed	if(playerSpeed < maxSpeed)	playerSpeed += speedVariation;
}// end acceleratePlayer()
// decrease playerSpeed
function decceleratePlayer() {	// make sure playerSpeed is still moving	if(playerSpeed > 0)	playerSpeed -= (speedVariation / 2);
}// end acceleratePlayer()
// rotates the passed object based on the passed direction
function rotate(obj, direction) {	var rotateAngle = direction == DIRECTION.left ? -7 : 7;	playerAngle = obj.data('angle') + rotateAngle;	if(playerAngle > MAX_ANGLE)	playerAngle -= 360;	else if(playerAngle < MIN_ANGLE)	playerAngle += 360;	obj.css({ 'transform': 'rotate(' + playerAngle + 'deg)' });	obj.data('angle', playerAngle);
}// end rotate(obj, degrees)
// check if the object is empty
function objectIsEmpty(obj) {	for(var prop in obj) {	if(obj.hasOwnProperty(prop)) {	return false;	}	}// end for-loop	return true;
}// end objectIsEmpty(obj)
// converts degrees to radians
function convertToRadians(angle) {	return (Math.PI / 180) * angle;
}// end convertToDegrees(angle)
// character object
function character(height, width, top, right, bottom, left) {	this.height = height,	this.width = width,	this.top = top,	this.right = right,	this.bottom = bottom,	this.left = left
}// end character(height, width, top, right, bottom, left)
Jquery 2d character movement - Script Codes
Jquery 2d character movement - Script Codes
Home Page Home
Developer Drew Adams
Username drewtadams
Uploaded October 04, 2022
Rating 3
Size 4,291 Kb
Views 18,216
Do you need developer help for Jquery 2d character movement?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Drew Adams (drewtadams) Script Codes
Name
Chat scroll-up modal jquery
Complimentary hex color calculator
A lot of Alerts - Exercise
Css coins
CSS Speech Bubble
Multiple Choice Quiz
Binary clock
A Pen by Drew Adams
Jquery to-do list
Vanilla js carousel
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!